<template>
  <div class="login-page-container">
    <div class="login-container">
      <!-- 左侧宣传图 -->
      <div class="login-banner">
        <div class="login-banner-content">
          <div class="login-logo">CodeHelp</div>
          <p class="login-slogan">私密 · 高效 · 点对点技术支持</p>
          <p class="login-desc">专为开发者打造的安全协作平台，所有问题需审核后处理。</p>
          <ul class="login-feature-list">
            <li><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg> 指定专家接单</li>
            <li><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4">
              </path>
            </svg> 文件自动脱敏扫描</li>
            <li><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.165-2.052-.48-3.016z">
              </path>
            </svg> 管理员审核机制</li>
          </ul>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-form-wrapper">
        <!-- Tab 切换 -->
        <div class="login-tabs">
          <span class="tab-active">账号密码登录</span>
        </div>

        <!-- 登录表单 -->
        <form id="loginForm">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off" />
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" />
          </div>
          <button type="submit" class="login-btn" id="loginBtn">
            <span id="btnText" class="text">立即登录</span>
            <span id="loadingText" class="loading" style="display: none;">正在登录...</span>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue"
import request from "@/api/request"
import router from "@/router"

onMounted(function () {
  const form = document.getElementById("loginForm")
  form.addEventListener("submit", async function (e) {
    e.preventDefault()

    const usernameInput = document.getElementById("username")
    const passwordInput = document.getElementById("password")
    const username = usernameInput.value.trim()
    const password = passwordInput.value

    const btn = document.getElementById("loginBtn")
    const text = document.getElementById("btnText")
    const loading = document.getElementById("loadingText")

    clearError(usernameInput)
    clearError(passwordInput)

    let hasError = false

    if (!username) {
      showError(usernameInput, '请输入用户名')
      hasError = true
    }

    if (!password) {
      showError(passwordInput, '请输入密码')
      hasError = true
    }

    if (hasError) return

    // 开始加载状态
    btn.disabled = true
    text.style.display = "none"
    loading.style.display = "inline"

    try {
      const res = await request.post('/api/user/login', {
        username,
        password
      })

      // 登录成功
      const { token } = res.data.data
      localStorage.setItem('token', token)

      // 跳转首页
      router.push('/home')
    } catch (err) {
      console.error(err)
      // 错误已在拦截器中提示
    } finally {
      btn.disabled = false
      text.style.display = "inline"
      loading.style.display = "none"
    }
  })

  function showError(el, msg) {
    el.style.borderColor = '#ff4d4f';
    let err = el.parentNode.querySelector('.error-msg');
    if (!err) {
      err = document.createElement('div');
      err.className = 'error-msg';
      el.parentNode.appendChild(err);
    }
    err.textContent = msg;
  }

  function clearError(el) {
    el.style.borderColor = '#d9d9d9';
    const err = el.parentNode.querySelector('.error-msg');
    if (err) err.remove();
  }
});
</script>

<style scoped>
.login-page-container {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(135deg, #f7f9fc, #eef1f6);
  color: #1a1a1a;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login-container {
  width: 900px;
  height: 560px;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  background: white;
  animation: fadeInUp 0.6s ease-out;
}

/* 左侧宣传区 */
.login-banner {
  flex: 1;
  background: linear-gradient(135deg, #0d3b66, #1e3a8a);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 30px;
  text-align: center;
  position: relative;
}

.login-logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  color: #ffffff;
}

.login-slogan {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

.login-desc {
  font-size: 15px;
  opacity: 0.9;
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 16px;
}

.login-feature-list {
  text-align: left;
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.7;
  margin-top: 20px;
  padding-left: 20px;
}

.login-feature-list li {
  margin-bottom: 6px;
}

.login-feature-list svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
  color: #5eead4;
}

/* 右侧表单区 */
.login-form-wrapper {
  flex: 1;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-tabs {
  display: flex;
  gap: 30px;
  margin-bottom: 24px;
  font-size: 16px;
}

.tab-active {
  font-weight: 600;
  color: #1a1a1a;
  position: relative;
}

.tab-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1e3a8a;
  border-radius: 2px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #595959;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
}

.form-group input:focus {
  border-color: #1e3a8a;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
  outline: none;
}

.login-btn {
  width: 100%;
  padding: 0 10px;
  height: 40px;
  background-color: #1e3a8a;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn:hover {
  background-color: #1e40af;
}

.login-btn:disabled {
  background-color: #9fb5db;
  cursor: not-allowed;
}

.error-msg {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .login-container {
    flex-direction: column;
    height: auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  }

  .login-banner {
    padding: 30px 20px;
  }

  .login-form-wrapper {
    padding: 40px 20px;
  }
}
</style>
